// 总易积分点击进来的三个button 
import React, {Component} from "react";
import {
  View,
  Text,
  Button,
  StyleSheet,
  Image,
  TouchableOpacity,
} from 'react-native';

const styles = StyleSheet.create({
  threeBtn:{
    flexDirection:'row',
    alignItems: 'center',  
    justifyContent: 'center',
    paddingTop: '5%',
    marginBottom: 100,
  },
  touch: {
    width: '33%',
    alignItems: 'center',      // 水平局中
    justifyContent: 'center',  // 垂直居中
  },
  touchPress: {
    borderWidth: 1,
    borderColor: '#fff8dc',
    borderRadius: 4,
    alignItems: 'center',      // 水平局中
    justifyContent: 'center',  // 垂直居中
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 18,
    paddingRight: 18,
  },
  touchText: {
    fontSize: 16,
    color: '#fff',
  },
});


class ThreeBtn extends React.Component{
  static navigationOptions = {
    tabBarLabel: 'Home',
  };
  constructor(props) {
    super(props)
  }
  handlePress() {
    alert(1);
  }
  render(){
    return (
      <View style={styles.threeBtn}>
        <TouchableOpacity style={styles.touch} onPress={this.handlePress}>
          <View style={styles.touchPress}>
            <Text style={styles.touchText}>可使用</Text>
            <Text style={styles.touchText}>1346.0</Text>
          </View> 
        </TouchableOpacity>
        <TouchableOpacity style={styles.touch}>
          <View style={styles.touchPress}>
            <Text style={styles.touchText}>可增值</Text>
            <Text style={styles.touchText}>0.0</Text>
          </View> 
        </TouchableOpacity>
        <TouchableOpacity style={styles.touch}>
          <View style={styles.touchPress}>
            <Text style={styles.touchText}>可兑换</Text>
            <Text style={styles.touchText}>1346.0</Text>
          </View> 
        </TouchableOpacity>
      </View>
    );
  }
}

export default ThreeBtn;
